---
name: useMouse
route: /useMouse
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

# useMouse

一个跟踪鼠标位置的 Hook

## 代码演示

### 默认用法
<JackBox tsCode={Demo1CodeTsx} jsCode={Demo1CodeJsx} demoName='默认用法' description='获取鼠标位置' >
  <Demo1 />
</JackBox>

## API
```
const state: {
  screenX: number, 
  screenY: number, 
  clientX: number, 
  clientY: number,
  pageX: number,
  pageY: number,
} = useMouse();
```

### 结果

| 参数     | 说明                                     | 类型       |
|----------|-------------|------|
| screenX     | 距离显示器左侧的距离  | number  |
| screenY     | 距离显示器顶部的距离  | number  |
| clientX     | 距离当前视窗左侧的距离  | number  |
| clientY     | 距离当前视窗顶部的距离  | number  |
| pageX     | 距离完整页面顶部的距离  | number  |
| pageY     | 距离完整页面顶部的距离  | number  |